<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./tab.css">

<body>
    <fieldset id="tab">
        <legend>tab切换动态组件</legend>
        <div id="div">
            <div id="btn">
                <button id="btn1"  class="color">home</button>
                <button id="btn2"  >email</button>
                <button id="btn3"  >mine</button>
                <button id="btn4"  >charge</button>
            </div>
            <div id="mainBox">
            <div id="main" class="active">主页</div>
            <div id="main">邮箱</div>
            <div id="main">个人中心</div>
            <div id="main">充值中心</div>
            </div>
            
        </div>

    </fieldset>
</body>

</html>
<script src="./tab.js"></script>